<html>
<head>
    <title>Application Page</title>
	
	<link rel="stylesheet" href="development-bundle/themes/base/jquery.ui.all.css">
	<script src="development-bundle/jquery-1.4.4.js"></script>
	<script src="development-bundle/ui/jquery.ui.core.js"></script>
	<script src="development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="development-bundle/ui/jquery.ui.datepicker.js"></script>
	<script>
		$(function() {
			//NOTE: when school start dates are initialized, they set the min date of end date to be whatever is selected
			$("#txtDOB").datepicker({ dateFormat: 'dd/mm/yy' });
			$("#txtSchoolsEndDate1").datepicker({ dateFormat: 'dd/mm/yy' });
			$('#txtSchoolsStartDate1').datepicker({ dateFormat: 'dd/mm/yy', onSelect:function(){ $('#txtSchoolsEndDate1').datepicker('option', {minDate: $(this).datepicker('getDate')}); }});
			$("#txtSchoolsEndDate2").datepicker({ dateFormat: 'dd/mm/yy' });
			$("#txtSchoolsStartDate2").datepicker({ dateFormat: 'dd/mm/yy', onSelect:function(){ $('#txtSchoolsEndDate2').datepicker('option', {minDate: $(this).datepicker('getDate')}); }});
			$("#txtSchoolsEndDate3").datepicker({ dateFormat: 'dd/mm/yy' });
			$("#txtSchoolsStartDate3").datepicker({ dateFormat: 'dd/mm/yy', onSelect:function(){ $('#txtSchoolsEndDate3').datepicker('option', {minDate: $(this).datepicker('getDate')}); }});
		});
	</script>

<style type="text/css">
	table.bordered {
		border-width: thin;
		border-style: solid;
		}
</style>
</head>
<script>
function checkSubmission() {
	if (validate()) {
		document.getElementById("divValidationMessage").style.display = "none";
		
		
		document.getElementById("divContactInfo").style.display = "block";
		document.getElementById("divFormInfo").style.display = "block";
		document.getElementById("divName").style.display = "block";
		document.getElementById("divDOB").style.display = "block";
		document.getElementById("divSex").style.display = "block";
		document.getElementById("divAddress").style.display = "block";
		document.getElementById("divGeographics").style.display = "block";
		document.getElementById("divImpairments").style.display = "block";
		document.getElementById("divEducation").style.display = "block";
		document.getElementById("divExam").style.display = "block";
		document.getElementById("divGrades").style.display = "block";
		document.getElementById("divEmergencyContact").style.display = "block";
		document.getElementById("divProgram").style.display = "block";
		document.getElementById("divDeclaration").style.display = "block";
		
		document.getElementById("divReviewMessage").style.display = "block";
		
		document.getElementById("divButton").style.display = "none";
		document.getElementById("divSubmit").style.display = "block";
	}
}
function validate() {
	var status = true;
	
	//hides non-required information/reveals validation message
	//Note: comment these out if you decide to include an additional field for validation
	document.getElementById("divValidationMessage").style.display = "block";
	document.getElementById("divContactInfo").style.display = "none";
	document.getElementById("divFormInfo").style.display = "none";
	document.getElementById("divSex").style.display = "none";
	document.getElementById("divExam").style.display = "none";
	document.getElementById("divGrades").style.display = "none";
	document.getElementById("divGeographics").style.display = "none";
	document.getElementById("divImpairments").style.display = "none";
	document.getElementById("divEducation").style.display = "none";
	document.getElementById("divEducationDatesError").style.display = "none";
	document.getElementById("divEmergencyContact").style.display = "none";
	document.getElementById("divDeclaration").style.display = "none";
	
	//Name field
	if (document.getElementById("txtSurname").value == ""){
	 document.getElementById("divName").style.display = "block";
	 status = false;
	}
	else
	 document.getElementById("divName").style.display = "none";
	
	//Date of Birth field
	if (document.getElementById("txtDOB").value == ""){
	 document.getElementById("divDOB").style.display = "block";
	 status = false;
	}
	else
	 document.getElementById("divDOB").style.display = "none";
		
	//Address field
	if (document.getElementById("txtAddress").value == "" ||
	    document.getElementById("txtPhone").value == ""){
	 document.getElementById("divAddress").style.display = "block";
	 status = false;
	}
	else
	 document.getElementById("divAddress").style.display = "none";
	 
/*
	//Geographics field
	if (document.getElementById("txtPlaceofbirth").value == "" ||
	    document.getElementById("txtNationality").value == "" ||
		document.getElementById("txtHometown").value == "" ||
		document.getElementById("txtRegion").value == ""){
	 document.getElementById("divGeographics").style.display = "block";
	 status = false;
	}
	else
	 document.getElementById("divGeographics").style.display = "none";
	
	//Impairments field
	if (document.getElementById("rdoYesimpairment").checked == false && document.getElementById("rdoNoimpairment").checked == false){
	 document.getElementById("divImpairments").style.display = "block";
	 status = false;
	}
	else if (document.getElementById("rdoYesimpairment").checked == true && document.getElementById("txtImpairment").value == ""){
	 document.getElementById("divImpairments").style.display = "block";
	 status = false;
	}
	else
	 document.getElementById("divImpairments").style.display = "none";
	 
	 //Education field
	if (document.getElementById("txtSecschools1").value != ""){
		if (document.getElementById("txtSchoolsStartDate1").value == "" || document.getElementById("txtSchoolsEndDate1").value == "") {
		  document.getElementById("divEducation").style.display = "block";
		  document.getElementById("divEducationDatesError").style.display = "block";
		  status = false;
		}
	}
	else if (document.getElementById("txtSecschools2").value != ""){
		if (document.getElementById("txtSchoolsStartDate2").value == "" || document.getElementById("txtSchoolsEndDate2").value == "") {
		  document.getElementById("divEducation").style.display = "block";
		  document.getElementById("divEducationDatesError").style.display = "block";
		  status = false;
		}
	}
	else if (document.getElementById("txtSecschools3").value != ""){
		if (document.getElementById("txtSchoolsStartDate3").value == "" || document.getElementById("txtSchoolsEndDate3").value == "") {
		  document.getElementById("divEducation").style.display = "block";
		  document.getElementById("divEducationDatesError").style.display = "block";
		  status = false;
		}
	}
	else {
	 document.getElementById("divEducation").style.display = "none";
	 document.getElementById("divEducationDatesError").style.display = "none";
	}
	 
	//Emergency Contact field
	if (document.getElementById("txtParentName").value == "" ||
	    document.getElementById("txtParentRelation").value == "" ||
		document.getElementById("txtParentAddress").value == "" ||
	    document.getElementById("txtParentPhone").value == ""){
	 document.getElementById("divEmergencyContact").style.display = "block";
	 status = false;
	}
	else
	 document.getElementById("divEmergencyContact").style.display = "none";
*/
	 
	 //Program field
	if (document.getElementById("rdoMLA").checked == true ||
		document.getElementById("rdoMLT").checked == true ||
		document.getElementById("rdoDMLT").checked == true){
	 document.getElementById("divProgram").style.display = "none";
	}
	else
	{
	 document.getElementById("divProgram").style.display = "block";
	 status = false;
	}
	
/*
	//Declaration field
	if (document.getElementById("txtWitnessName").value == "" ||
	    document.getElementById("txtWitnessStatus").value == ""){
	 document.getElementById("divDeclaration").style.display = "block";
	 status = false;
	}
	else
	 document.getElementById("divDeclaration").style.display = "none";
*/
	 
	return(status);
}
</script>
<body>
<a name="pagetop"></a>
<form id="Application Form" name="Application Form" action="print-form.php" method="POST">

<div id="divTitle" align="center">
	<center><h1>KINGS NURSING AND ALLIED HEALTH COLLEGE LTD</h1></center>
	<br/><br/>

<div id="divValidationMessage" style="display:none">
	<h3><font color="red">
	We're Sorry. But the fields below must be filled out before we can continue processing
	your information.<br/>Answer the remaining questions and click the "Submit Application" button to
	continue.
	</font></h3>
</div>
<div id="divReviewMessage" style="display:none">
	<h3><font color="blue">
	Please review your information to ensure everything is correct before your application<br/>
	is processed. Once you are sure everything is accurate, click the "Submit Application" button<br/>
	again to finalize your application.
	</font></h3>
</div>
</div>

<div id="divMaster" style="margin:0% 0% 0% 25%">
<div id="divContactInfo">
<h3>P.O. BOX 89, DANSOMAN ACCRA</h3>
<pre>
Tel: 233-21-315870	Mobile: 0208185454
E-Mail: MLKMC@rogers.com
</pre>
<br/><br/>
</div>

<div id="divFormInfo">
<table>
	<tr>
	<td>
		<h3>APPLICATION FORM</h3>
	</td>
	<td rowspan="2">
		<table class="bordered">
		<tr><td>
		<br/><br/><br/>
		<center>Fix Passport Picture Here</center>
		<br/><br/><br/>
		</td></tr>
		</table>
	</td>
	</tr>
	<tr>
	<td>
		i.  Certified photocopy of result slips;<br>
		ii. Two recent passport-size photographs one of which should be fixed on the form.<br>
		The remaining photograph should be endorsed. (See Declaration section)
	</td>
	<td></td>
	</tr>
</table>
<br/><br/>
</div>

<div  id="divName">
<h4>1. Name</h4>

<b>TITLE:</b>
<br/>
<select id="drpTitle" name="drpTitle">
	<option>Mr</option>
	<option>Mrs</option>
	<option>Miss</option>
</select>
<br/><br/>
<b>SURNAME:</b>
<br/>
	<input type="text" id="txtSurname" name="txtSurname" size="50" maxlength="45"/>
<br/><br/>
<b>OTHER NAME:</b>
<br/>
	<input type="text" id="txtOthername" name="txtOthername" size="50" maxlength="45"/>
	<br/>
	(Ensure that names correspond with those used for all examinations taken. Provide legal proof for any change in name.)
<br/><br/>
</div>

<div id="divDOB">
<h4>2. Date of Birth (dd,mm,yyyy)</h4>
	<input type="text" id="txtDOB" name="txtDOB" size="10" maxlength="10" READONLY/>
<br/><br/>
</div>

<div id="divSex">
<h4>3. Gender</h4>
<select id="drpSex" name="drpSex">
	<option>Male</option>
	<option>Female</option>
</select>
<br/><br/>
</div>

<div id="divAddress">
<h4>4. Address to which communication regarding this application should be sent:</h4>
	<input type="text" id="txtAddress" name="txtAddress" size="75" maxlength="75"/>
<br/><br/>
	<b>E-Mail Address:</b>
	<input type="text" id="txtEmail" name="txtEmail" size="30" maxlength="45"/>
	<b>Tel. No:</b>
	<input type="text" id="txtPhone" name="txtPhone" size="15" maxlength="45"/>
<br/><br/>
</div>

<div id="divGeographics">
<h4>5. Geographics</h4>
<table>
	<tr>
		<td><b>i.</b></td>
		<td><b>Place of Birth</b></td>
		<td><input type="text" id="txtPlaceofbirth" name="txtPlaceofbirth" size="45" maxlength="45"/></td>
	</tr><tr>
		<td><b>ii.</b></td>
		<td><b>Nationality</b></td>
		<td><input type="text" id="txtNationality" name="txtNationality" size="45" maxlength="45"/></td>
	</tr><tr>
		<td><b>iii.</b></td>
		<td><b>Home Town</b></td>
		<td><input type="text" id="txtHometown" name="txtHometown" size="45" maxlength="45"/></td>
	</tr><tr>
		<td><b>iv.</b></td>
		<td><b>Region and Country</b></td>
		<td><input type="text" id="txtRegion" name="txtRegion" size="45" maxlength="45"/></td>
	</tr><tr>
		<td><b>v.</b></td>
		<td><b>Religion</b></td>
		<td><input type="text" id="txtReligion" name="txtReligion" size="45" maxlength="45"/></td>
	</tr>
</table>
<br/><br/>
</div>

<div id="divImpairments">
<b>6. Do you suffer from any form of impairment?</b>
	Yes
	<input type="radio" id="rdoYesimpairment" name="rdoimpairment" value="Yes"/>
	No
	<input type="radio" id="rdoNoimpairment" name="rdoimpairment" value="No"/>
<br/><br/>

<h4>7. If yes, please specify</h4>
    <textarea cols="50" rows="4"  maxlength="200" id="txtImpairment" name="txtImpairment" style="white-space:nowrap"></textarea>
<br/><br/>
</div>

<div id="divEducation">
<h4>8. Education</h4>
<table>
	<tr>
		<td valign="top"><center>Name of Secondary School/College & Location</center></td>
		<td valign="top"><center>Offices Held</center></td>
		<td><center>Attended Dates<br>(dd,mm,yyyy)</center></td>
		<td rowspan="7">
		<div id="divEducationDatesError" style="display:none">
			<font color="red">Please enter start and end dates<br/>for each school attended.<br/>NOTE: Starting dates must<br/>be before ending dates.</font>
		</div>
		</td>
	</tr><tr>
		<td><input type="text" id="txtSecschools1" name="txtSecschools1" size="50" maxlength="75"/></td>
		<td><input type="text" id="txtOffices1" name="txtOffices1" size="20" maxlength="45"/></td>
		<td>
			<input type="text" id="txtSchoolsStartDate1" name="txtSchoolsStartDate1" size="10" maxlength="10" READONLY/>
			Start Date
		</td>
	</tr><tr>
		<td></td><td></td>
		<td>
			<input type="text" id="txtSchoolsEndDate1" name="txtSchoolsEndDate1" size="10" maxlength="10" READONLY/>
			End Date
		</td>
	</tr><tr>
		<td><input type="text" id="txtSecschools2" name="txtSecschools2" size="50" maxlength="75"/></td>
		<td><input type="text" id="txtOffices2" name="txtOffices2" size="20" maxlength="45"/></td>
		<td>
			<input type="text" id="txtSchoolsStartDate2" name="txtSchoolsStartDate2" size="10" maxlength="10" READONLY/>
			Start Date
		</td>
	</tr><tr>
		<td></td><td></td>
		<td>
			<input type="text" id="txtSchoolsEndDate2" name="txtSchoolsEndDate2" size="10" maxlength="10" READONLY/>
			End Date
		</td>
	</tr><tr>
		<td><input type="text" id="txtSecschools3" name="txtSecschools3" size="50" maxlength="75"/></td>
		<td><input type="text" id="txtOffices3" name="txtOffices3" size="20" maxlength="45"/></td>
		<td>
			<input type="text" id="txtSchoolsStartDate3" name="txtSchoolsStartDate3" size="10" maxlength="10" READONLY/>
			Start Date
		</td>
	</tr><tr>
		<td></td><td></td>
		<td>
			<input type="text" id="txtSchoolsEndDate3" name="txtSchoolsEndDate3" size="10" maxlength="10" READONLY/>
			End Date
		</td>
	</tr>
</table>
<br/><br/>
</div>

<div id="divExam">
<h4>9. Examination Details:</h4>
<table>
	<tr>
		<td width="125"><b>Attempts</b></td>
		<td><center>1st</center></td>
		<td><center>2nd</center></td>
		<td><center>3rd</center></td>
	</tr><tr>
		<td><b>Name</b></td>
		<td><input type="text" id="txtExamName1" name="txtExamName1" size="25" maxlength="45"/></td>
		<td><input type="text" id="txtExamYear1" name="txtExamYear1" size="25" maxlength="45"/></td>
		<td><input type="text" id="txtExamIndex1" name="txtExamIndex1" size="25" maxlength="45"/></td>
	</tr><tr>
		<td><b>Year</b></td>
		<td><input type="text" id="txtExamName2" name="txtExamName2" size="25" maxlength="45"/></td>
		<td><input type="text" id="txtExamYear2" name="txtExamYear2" size="25" maxlength="45"/></td>
		<td><input type="text" id="txtExamIndex2" name="txtExamIndex2" size="25" maxlength="45"/></td>
	</tr><tr>
		<td><b>Index No(s)</b></td>
		<td><input type="text" id="txtExamName3" name="txtExamName3" size="25" maxlength="45"/></td>
		<td><input type="text" id="txtExamYear3" name="txtExamYear3" size="25" maxlength="45"/></td>
		<td><input type="text" id="txtExamIndex3" name="txtExamIndex3" size="25" maxlength="45"/></td>
	</tr>
</table>
<br/><br/>
</div>

<div id="divGrades">
<h4>10. Grades Obtained</h4>
<table>
	<tr>
		<td><center><b>Subjects</b></center></td>
		<td colspan="3"><center><b>Grades</b></center></td>
	</tr><tr>
		<td></td>
		<td><center>1st Attempt</center></td>
		<td><center>2nd Attempt</center></td>
		<td><center>3rd Attempt</center></td>
	</tr><tr>
		<td><input type="text" id="txtGradesSubject1" name="txtGradesSubject1" size="40" maxlength="45"/></td>
		<td><input type="text" id="txtGradesFirst1" name="txtGradesFirst1" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesSecond1" name="txtGradesSecond1" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesThird1" name="txtGradesThird1" size="15" maxlength="45"/></td>
	</tr><tr>
		<td><input type="text" id="txtGradesSubject2" name="txtGradesSubject2" size="40" maxlength="45"/></td>
		<td><input type="text" id="txtGradesFirst2" name="txtGradesFirst2"size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesSecond2" name="txtGradesSecond2" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesThird2" name="txtGradesThird2" size="15" maxlength="45"/></td>
	</tr><tr>
		<td><input type="text" id="txtGradesSubject3" name="txtGradesSubject3" size="40" maxlength="45"/></td>
		<td><input type="text" id="txtGradesFirst3" name="txtGradesFirst3" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesSecond3" name="txtGradesSecond3" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesThird3" name="txtGradesThird3" size="15" maxlength="45"/></td>
	</tr><tr>
		<td><input type="text" id="txtGradesSubject4" name="txtGradesSubject4" size="40" maxlength="45"/></td>
		<td><input type="text" id="txtGradesFirst4" name="txtGradesFirst4" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesSecond4" name="txtGradesSecond4" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesThird4" name="txtGradesThird4" size="15" maxlength="45"/></td>
	</tr><tr>
		<td><input type="text" id="txtGradesSubject5" name="txtGradesSubject5" size="40" maxlength="45"/></td>
		<td><input type="text" id="txtGradesFirst5" name="txtGradesFirst5" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesSecond5" name="txtGradesSecond5" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesThird5" name="txtGradesThird5" size="15" maxlength="45"/></td>
	</tr><tr>
		<td><input type="text" id="txtGradesSubject6" name="txtGradesSubject6" size="40" maxlength="45"/></td>
		<td><input type="text" id="txtGradesFirst6" name="txtGradesFirst6" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesSecond6" name="txtGradesSecond6" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesThird6" name="txtGradesThird6" size="15" maxlength="45"/></td>
	</tr><tr>
		<td><input type="text" id="txtGradesSubject7" name="txtGradesSubject7" size="40" maxlength="45"/></td>
		<td><input type="text" id="txtGradesFirst7" name="txtGradesFirst7" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesSecond7" name="txtGradesSecond7" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesThird7" name="txtGradesThird7" size="15" maxlength="45"/></td>
	</tr><tr>
		<td><input type="text" id="txtGradesSubject8" name="txtGradesSubject8" size="40" maxlength="45"/></td>
		<td><input type="text" id="txtGradesFirst8" name="txtGradesFirst8" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesSecond8" name="txtGradesSecond8" size="15" maxlength="45"/></td>
		<td><input type="text" id="txtGradesThird8" name="txtGradesThird8" size="15" maxlength="45"/></td>
	</tr>
</table>
<br/><br/>
</div>

<div id="divEmergencyContact">
<h4>11. Emergency Contact Information</h4>
<table>
	<tr>
	<td><b>Name of Parent or Guardian</b></td>
	<td><input type="text" id="txtParentName" name="txtParentName" size="50" maxlength="45"/></td>
	</tr>
	<tr>
	<td><b>Relationship to Candidate</b></td>
	<td><input type="text" id="txtParentRelation" name="txtParentRelation" size="50" maxlength="45"/></td>
	</tr>
	<tr>
	<td><b>Address of Parent or Guardian</b></td>
	<td><input type="text" id="txtParentAddress" name="txtParentAddress" size="50" maxlength="45"/></td>
	</tr>
	<tr>
	<td><b>Tel:</b><input type="text" id="txtParentPhone" name="txtParentPhone" size="25" maxlength="45"/></td>
	<td><b>E-mail:</b><input type="text" id="txtParentEMail" name="txtParentEMail" size="42" maxlength="45"/></td>
	</tr>
	<tr>
	<td><b>Occupation of Parent or Guardian</b></td>
	<td><input type="text" id="txtParentOccupation" name="txtParentOccupation" size="50" maxlength="45"/></td>
	</tr>
</table>
<br/>
</div>

<div id="divProgram">
<h4>12. Program You Intend to Study</h4>
	<input type="radio" id="rdoMLA" name="program" value="MLA"/>
	Medical Laboratory Assistant (MLA)
	<br/>
	<input type="radio" id="rdoMLT" name="program" value="MLT"/>
	Medical Laboratory Technitian (MLT)
	<br/>
	<input type="radio" id="rdoDMLT" name="program" value="DMLT"/>
	Medical Laboratory Technologist (DMLT)
<br/><br/><br/>
</div>

<div id="divDeclaration">
	<center><h3>DECLARATION BY WITNESS</h3></center>
	
	<p>
	After submission, This declaration should be printed and signed by someone of
	high repute who should also endorse a passport-sized photograph on the reverse side.
	This person should be a Senior Public Servant/Clergyman/Lawyer/Medical Practitioner.
	The applicantion will not be valid if this is not signed.
	<br/><br/>
	If possible, please enter the name, status, and address of the Endorser below for application submission.
	</p>
	<br/><br/>
<table>
	<tr>
		<td>Name:</td>
		<td><input type="text" id="txtWitnessName" name="txtWitnessName" size="50" maxlength="45"/></td>
	</tr><tr>
		<td>Status:</td>
		<td><input type="text" id="txtWitnessStatus" name="txtWitnessStatus" size="50" maxlength="45"/></td>
	</tr><tr>
		<td>Address:</td>
		<td><input type="text" id="txtWitnessAddress" name="txtWitnessAddress" size="50" maxlength="45"/></td>
	</tr>
</table>
<br/><br/><br/>
</div>

<div id="divButton">
	<a href="#pagetop" style="text-decoration:none"><input type="button" ID="btnReviewApp" value="Submit Application" onclick="checkSubmission();"/></a>
</div>

<div id="divSubmit" style="display:none">
	<input type="submit" ID="btnSubmit" name="btnSubmit" value="Submit Application"/>
</div>
</div>
</form>
</body>
</html>